<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 事件循环 -- 在js里面代码的执行顺序都是从上往下，从右往左执行的。但是如果代码里面有异步任务，那么代码执行顺序就会发生改变
      // 同步任务先执行完毕，然后在执行异步任务
      // 如果js代码执行碰到了异步代码，会将异步任务(简单理解就是函数)放到事件队列里面去
      // 同步任务执行完毕以后，js引擎去循环遍历我们的 异步任务队列， 看里面有没有任务需要执行，如果有就拿出来执行。循环往复。不断的在遍历任务队列。这个机制叫事件循环
      // 为什么要讲这个： 是因为代码里面的同步异步特点导致的
      // js的代码，有同步和异步的区别。  异步任务（dom事件，定时器，ajax）
      // console.log(1);
      // setTimeout(() => {
      //   console.log(2);
      // }, 0);
      // console.log(3);

      // 只要说到了异步任务，还需要在深入一点，异步任务还分为宏任务和微任务
      // script 定时器 都是宏任务   promise.then是微任务
      // 在js代码里面  宏任务先执行完毕，然后会把宏任务里面的所有微任务执行完毕； 接下来在执行新的宏任务，在执行里面所有的微任务。直到结束
      // 去银行， 10个人排队(10个人就是宏任务)  1个人有很多事情(取钱，买理财，零存整取，买黄金。。。。)
      const p1 = Promise.resolve(1);
      console.log(1);
      setTimeout(() => {
        console.log(2);
      }, 0);
      p1.then(() => {
        console.log(3);
      });
      console.log(4);
    </script>
  </body>
</html>
